<template>
  <div class="content">
    <search-box></search-box>
    <!-- <vSwiper></vSwiper> -->
    <vSwiper :bannerList="list"></vSwiper>
    <div class="main-box mgt-27">
      <div class="width1200 margin-center">
        <div class="top-message-box flex-between-center mgb-27">
          <div
            class="left-message-box flex-start-center hand"
            @click="
              {
                $router.push('notice');
              }
            "
          >
            <img
              src="./assets/img/index/broadcast.png"
              class="brad-Img mgr-10"
              alt=""
            />
            <p class="messge-text line1">{{ aoticeList[0].title }}</p>
          </div>
          <div
            class="right-message-box hand"
            @click="
              {
                $router.push('notice');
              }
            "
          >
            <p class="messge-text line1">{{aoticeList[1].title}}</p>
          </div>
        </div>
        <div class="mgb-40">
          <img :src="ta[0].bannerUrl" alt="" class="ads" />
        </div>
        <div>
          <div class="com-tag flex-between-center mgb-20">
            <div class="title-tag">学术引领</div>
            <div class="more-tag flex-start-center">
              <p>查看更多</p>
              <img
                src="./assets/img/index/more.png"
                alt=""
                class="more-Img mgl-5"
              />
            </div>
          </div>
          <div class="learning-box flex-between-center mgb-40">
            <div
              class="learn-child"
              v-for="(item, index) in learningList"
              :key="index"
            >
              <el-image
                class="learning-Img mgb-10"
                :src="item.url"
                fit="cover"
              ></el-image>
              <div class="shade">
                <p class="f16 color-fff mgb-5">查看更多</p>
                <i class="el-icon-arrow-down color-fff"></i>
              </div>
              <p class="mgl-20 title mgb-10 line1">{{ item.text }}</p>
              <p class="mgl-20 date-text mgb-17">{{ item.date }}</p>
            </div>
          </div>
          <div class="com-tag flex-between-center mgb-20">
            <div class="title-tag">新闻资讯</div>
            <div class="more-tag flex-start-center">
              <p>查看更多</p>
              <img
                src="./assets/img/index/more.png"
                alt=""
                class="more-Img mgl-5"
              />
            </div>
          </div>
          <div class="new-box flex-between-center mgb-40">
            <div
              class="learn-child"
              v-for="(item, index) in newsList"
              :key="index"
            >
              <el-image
                class="learning-Img mgb-10"
                :src="item.url"
                fit="cover"
              ></el-image>
              <div class="shade">
                <p class="f16 color-fff mgb-5">查看更多</p>
                <i class="el-icon-arrow-down color-fff"></i>
              </div>
              <p class="mgl-20 title mgb-10 line1">{{ item.text }}</p>
              <p class="mgl-20 date-text mgb-17">{{ item.date }}</p>
            </div>
          </div>
          <div class="com-tag flex-between-center mgb-34">
            <div class="title-tag">专家名师</div>
            <div class="more-tag flex-start-center">
              <p>查看更多</p>
              <img
                src="./assets/img/index/more.png"
                alt=""
                class="more-Img mgl-5"
              />
            </div>
          </div>
          <div class="teach-box flex-between-center">
            <div
              v-for="(item, index) in teachList"
              :key="index"
              class="teach-child flex-center-c"
            >
              <el-image
                class="avter mgb-20"
                :src="item.url"
                fit="cover"
              ></el-image>
              <p class="teach-name mgb-5">{{ item.name }}</p>
              <img
                src="./assets/img/index/img-77.png"
                alt=""
                class="line2 mgb-5"
              />
              <p style="width: 135px; text-align: center" class="mgb-10">
                {{ item.uni }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SearchBox from "./components/SearchBox";
import vSwiper from "./components/swiper";
import img_1 from "./assets/img/index/img-4.png";
import img_7 from "./assets/img/index/img-7.png";
import img_2 from "./assets/img/index/img-2.png";
export default {
  name: "Home",
  components: {
    SearchBox,
    vSwiper,
  },
  data() {
    return {
      aoticeList: "",
      list: [],
      ta:"",
      learningList: [
        {
          text: "红漫思政课亮相四川教育装备博览会",
          date: "2021-03-09",
          url: img_1,
        },
        {
          text: "红漫思政课亮相四川教育装备博览会",
          date: "2021-03-09",
          url: img_1,
        },
        {
          text: "红漫思政课亮相四川教育装备博览会",
          date: "2021-03-09",
          url: img_1,
        },
      ],
      newsList: [
        {
          text: "教育部长陈宝生：5面推动新阶段思政课高质...",
          date: "2021-03-09",
          url: img_7,
        },
        {
          text: "阿坝中小学一体化思政教学课拉开序幕",
          date: "2021-03-09",
          url: img_7,
        },
        {
          text:
            "红漫思政课亮相四川教育装备博览会红漫思政课亮相四川教育装备博览会",
          date: "2021-03-09",
          url: img_7,
        },
      ],
      teachList: [
        {
          name: "李晓东",
          url: img_2,
          uni: "北京师范大学教授",
        },
        {
          name: "李焦",
          url: img_2,
          uni: "清华大学副教授",
        },
        {
          name: "刘波",
          url: img_2,
          uni: "国防大学副教授",
        },
        {
          name: "陈科",
          url: img_2,
          uni: "成都市优秀班主任",
        },
        {
          name: "黄晶晶",
          url: img_2,
          uni: "四川省道德与法治赛课 一等奖获得者",
        },
      ],
    };
  },
  created() {
    this.getList();

    this.getNoticeList();

    this.getdaarr()
  },
  methods: {
    getNoticeList() {
      this.$api.banner
        .getNoticeList({})
        .then((d) => {
          this.aoticeList = d.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },

    
     getdaarr() {
      //获取接口
      this.$api.banner
        .getTeacherCourseList({
          position: 2,
        })
        .then((d) => {
          this.ta = d.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },





    getList() {
      //获取接口
      this.$api.banner
        .getTeacherCourseList({
          position: 1,
        })
        .then((d) => {
          this.list = d.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "assets/css/variable.less";
.teach-name {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
}
.line2 {
  width: 15px;
  height: 2px;
  background: #cb3e3e;
}
.teach-child {
  width: 15.5%;
  padding: 20px;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 1px;
  transition: 1s;
  &:hover {
    transform: scale(1.1) translateY(-30px);
    border: 1px solid @color-red;
    transition: 1s;
  }
}
.avter {
  width: 115px;
  height: 115px;
}
.learning-Img {
  width: 100%;
  height: 213px;
}
.learn-child {
  width: 30%;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 1px 1px 1px 1px;
  position: relative;
  cursor: pointer;
  .shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 213px;
    background: #000000b3;
    border-radius: 1px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: 1s;
  }
  &:hover {
    .shade {
      opacity: 1;
      transition: 1s;
    }
  }
}

.brad-Img {
  width: 30px;
  height: 30px;
}
.messge-text {
  font-size: 14px;
  color: #333333;
  font-family: Microsoft YaHei;
}
.left-message-box,
.right-message-box {
  width: 50%;
}
.more-Img {
  width: 10px;
  height: 12px;
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.date-text {
  color: #333333;
  font-size: 14px;
}
.main-box {
  // overflow: scroll;
  min-height: 600px;
}
</style>